const Item = ({ item, delTodo, updateStatus }) => {
  return (
    <div>
      <span style={{ textDecoration: item.status ? "line-through" : "none" }}>
        {item.text}
      </span>
      <button onClick={delTodo}>删除</button>
      <button onClick={updateStatus}>切换</button>
    </div>
  );
};

export default function ToDoListItem({ todolist = [], delTodo, updateStatus }) {
  return (
    <>
      <div>
        {todolist.map((item) => (
          <Item
            key={item.id}
            item={item}
            delTodo={() => delTodo(item.id)}
            updateStatus={() => updateStatus(item.id)}
          />
        ))}
      </div>
    </>
  );
}
